<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>excel上传</title>

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<a href="/index.html">返回地图页面</a><br>
<div class="container">
    <p style="color: red">请务必使用正确的模板上传文件，若excel的列名、列的数量、表格的顺序与模板不一致将导致数据无法存入远程数据库</p>
    <p style="color: red">请注意：在正式读取上传的excel文件之前会清除远程数据库的原有数据，然后再读取Excel的数据重新存入远程数据库</p>
    <div>
        <input type="file" id="upload" name="uploadFile" value="">
        <button onclick="uploadFile()" class="btn btn-primary">上传</button>
        <button onclick="window.location.href = 'http://data.anonyeast.top/%28%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6%29%E6%95%B0%E6%8D%AE-%E5%9B%9B%E5%B7%9D%E5%9C%9F%E7%B3%BB.xlsx'" class="btn btn-success">下载模板</button>
    </div>
    <span id="msg">上传速度较慢，后续会尽量优化，请不要重复点击上传按钮哦</span>
</div>

</body>
<script>
    function uploadFile() {
        // 获取文件的名称
        let fileName = $("#upload").val();
        console.log(fileName);
        // 获取文件的格式 xlsx xls才行
        fileExtName = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
        console.log(fileName);
        if (fileName == "") {
            alert("上传文件不能为空，请确认文件已正确选择。")
        } else if (fileExtName != ".xlsx" && fileExtName != ".xls") {
            alert("仅支持上传文件格式为.xlsx或.xls的Excel表格文件。");
        } else {
            ajaxFile();
        }
    }

    // 上传到服务器
    function ajaxFile() {
        // 采用formDate异步上传文件
        console.log("异步加载开始！")
        let formData = new FormData();
        let name = $("#upload").val();
        formData.append("file", $("#upload")[0].files[0]);
        formData.append("name", name);
        $.ajax({
            url: "/upload",
            type: "POST",
            async: false,
            data: formData,
            processData: false,
            contentType: false,
            success: function (res) {
                $("#msg").text(res);
            }
        })
    }
</script>
</html>